<template>
  <div class="slist">
    <ul class="class">
      <li class="sitem" v-for="(l, i) in list" :key="i">
        <router-link
          :to="{
            name: 'good',
            params: { gid: l.itemsId },
            query: { name: l.title },
          }"
          class="aitem"
        >
          <div class="top">
            <img :src="l.firstImgUrl" alt="" />
          </div>
          <div class="down">
            <p class="title">{{ l.title }}</p>
            <p class="price">￥{{ l.priceDesc }}</p>
          </div>
        </router-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    list: Array,
  },
};
</script>

<style lang="scss" scoped>
.slist {
  width: 100%;
  height: 100%;
  background: #f4f4f4;
  .class {
    width: 100%;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    li {
      width: 45%;
      height: 280px;
      background: #fff;
      border-radius: 15px;
      margin-top: 10px;
      img {
        width: 100%;
      }
    }
  }
}
</style>